<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
    <p>getters: </p>
    <h3>{{$store.getters.todoTools}}}</h3>
    <h3>{{$store.getters.doneLength}}</h3>
    <button @click="addTodo">add todo</button>
    <p>mutation:</p>
    <h3>{{$store.state.info}}</h3>
    <button @click="changeInfo">changInfo</button>
    <p>mudule: a-moduleA:</p>
    <h3>{{$store.state.a.name}}</h3>
    <button @click="updateName">updateName</button>
    <h3>{{$store.getters.getFullName}}</h3>
    <h3>{{$store.getters.getFullName1}}</h3>
    <h3>{{$store.getters.getFullName2}}</h3>
  </div>
</template>

<script>
export default {
    methods: {
        changeInfo(){
            // this.$store.commit("changeInfo")
            this.$store.dispatch("updateInfo", "我是payload").then((res) => {
                console.log(res);
            })
        },
        addTodo() {
            const stu = {id: "11", name: "D", done: true}
            this.$store.commit("addTodo", stu)
        },
        updateName() {
            this.$store.dispatch('asyncUpdateName', 'lisi')
        }
    }
}
</script>

<style>

</style>